import React, { Component } from "react";

import { Form, Icon, Input, Button } from 'antd';
import Logo from "./images/logo192.png";
import "./index.less";
class Login extends Component {

    handleSubmit = (event) => {
        event.preventDefault()
        const { getFieldsValue, validateFields } = this.props.form;

        validateFields((err, values) => {
            if (!err) {
                console.log(values)
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (<div className="login-container">
            <div className="login-header">
                <div className="login-content">
                    <img className="login-logo" src={Logo} alt="login" />
                    <div className="login-title">vvmily系统</div>
                </div>
            </div>
            <div className="login-bodyer">
                <div className="login-form">
                    <h2>欢迎登录vvmily！</h2>
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [{ required: true, message: 'Please input your username!' }],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="Username"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: 'Please input your Password!' }],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="Password"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>

                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>

                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>)
    }
}
/**
 * 1.高阶函数
 *  一类特别的函数：1).接收函数类型的参数；2).返回值是函数
 *  如：定时器：setTimeout() / setInterval() / Promise / 数组遍历的方法(forEach、map、find、reduce...)
 *  其他：fn.bind
 * 
 * 2.高阶组件
 *  本质就是一个函数：接收一个组件返回一个新的组件，并向传入组件传递特定属性（扩展组件）
 */
const WrappedLogin = Form.create({ name: 'normal_login' })(Login);
export default WrappedLogin
